<template>
  <v-card>
    <v-toolbar color="cyan" dark height="45">
      <v-toolbar-title>系统状态</v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card-text>
      <v-layout row wrap>
        <v-flex xs12 sm12 md6>
          <div id="cpuContainer" style="width:340px;height: 275px"></div>
        </v-flex>
        <v-flex xs12 sm12 md6>
          <div id="memContainer" style="width:340px;height: 275px"></div>
        </v-flex>
      </v-layout>
    </v-card-text>
  </v-card>
</template>

<script>
import echarts from 'echarts/lib/echarts'
import {fetch} from '../../utils/axios'
require('echarts/lib/chart/gauge')
export default {
  name: 'sys-chart',
  data () {
    return {
      cpuOption: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 50, name: 'CPU'}]
          }
        ]
      },
      memOption: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: {formatter: '{value}%'},
            data: [{value: 50, name: 'MEM'}]
          }
        ]
      },
      initv: ''
    }
  },
  mounted () {
    let cpuChart = echarts.init(document.getElementById('cpuContainer'))
    let memChart = echarts.init(document.getElementById('memContainer'))
    this.initv = setInterval(() => {
      this.getData()
      cpuChart.setOption(this.cpuOption, true)
      memChart.setOption(this.memOption, true)
    }, 2000)
    if (this.option && typeof this.option === 'object') {
      cpuChart.setOption(this.option, true)
      memChart.setOption(this.option, true)
    }
  },
  methods: {
    getData () {
      fetch('/dashboard/list_sys_info/', {}).then((response) => {
        this.cpuOption.series[0].data[0].value = JSON.parse(response).cpu
        this.memOption.series[0].data[0].value = JSON.parse(response).mem
      }).catch((error) => {
        console.log(error.response.data.detail)
      })
    }
  },
  destroyed () {
    clearInterval(this.initv)
  }
}
</script>

<style scoped>

</style>
